<template>
	<view class="imgview"  v-if="classifyImgInfo">
		 <swiper  :current="currIndex"  @change="currentChange" circular>
			 <swiper-item @click="maskCheng" v-for="(item,index) in classifystorlist" :key="item._id">
				 <image v-if="readIndexImg.includes(index)" :src="item.Picurl" mode="aspectFill" ></image>
			 </swiper-item>
		 </swiper>
	     
		 <view class="mask"  v-show="isShow">
				<!-- <navigator open-type="navigateBack" url="" class="backgo" @click="gotoback"  :style="{top:getBarHeight()+'px'}">
					<uni-icons type="left" size="22" color="#fff"></uni-icons>
				</navigator> -->
				<view class="backgo" >
					<view @click="navigateBack"><uni-icons type="left" size="22" color="#fff" ></uni-icons></view>
					<view style="color: aliceblue; align-items: center;margin: 0 10rpx;line-height: 25rpx;">|</view>
					<view @click="gotoback"><uni-icons type="home-filled" size="22" color="#fff" ></uni-icons></view>
				</view>
			 <view class="data_info">
				 <text class="text">{{currIndex+1}} / {{classifystorlist.length}}</text>
				 <view class="date">
					 <uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
				 </view>
				 <view class="moth">
					 <uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
				 </view>
			 </view>
			 <view class="icons">
				 <view class="icon_item" @click="infoopen()">
				 	<uni-icons type="more-filled" size="30" color="#fff"></uni-icons>
					<view>信息</view>
				 </view>
				 <view class="icon_item"  @click="staropen()">
				 	<uni-icons type="star" size="30" color="#fff"></uni-icons>
					<view>评分</view>
				 </view>
				 <view class="icon_item" @click="ImgDown">
				 	<uni-icons type="cloud-download-filled" size="30" color="#fff"></uni-icons>
					<view>下载</view>
				 </view>
			 </view>
		 </view>
	  <!-- </template> -->
	   <uni-popup ref="popup" type="bottom" :mask-click="false">
		 <view class="info">
			 <view class="info_title">
				 <view>
					 <uni-icons type="info" size="30"></uni-icons>
				 </view>
				 <view class="title">壁纸信息</view>
				 <view class="icon"  @click="infoclose()">
					 <uni-icons type="closeempty" size="30"></uni-icons>
				 </view>
			 </view>
			 <scroll-view scroll-y class="scroll">
					<view class="row">
						<text class="title_item">壁纸ID：</text>
						<text selectable class="bz_data">{{classifyImgInfo.classid}}</text>
					</view> 
					<view class="row">
						<text class="title_item">分类：</text>
						<text selectable class="bz_data">{{classifyImgInfo.nickname}}</text>
					</view> 
					<view class="row">
						<text class="title_item">发布者：</text>
						<text selectable class="bz_data">胡歌</text>
					</view> 
					<view class="row">
						<text class="title_item">评分：</text>
						<text  class="bz_data">
							<uni-rate allowHalf readonly :value="classifyImgInfo.score" v-model="starvalue" />
						</text>
					</view> 
					<view class="row">
						<text class="title_item">摘要：</text>
						<text selectable class="bz_data">{{classifyImgInfo.description}}</text>
					</view> 
					<view class="row">
						<text class="title_item">标签：</text>
						<text selectable class="bz_data tag" v-for="(item,index) in classifyImgInfo.tabs.length" :key='item'>{{classifyImgInfo.tabs[index]}}</text>
					</view> 
			 </scroll-view>
		 </view>
		</uni-popup>
		
		<uni-popup ref="starRef" :mask-click="false" safe-area=false>
			<view class="starbg">
				<view class="info_title">
					<view>
						<uni-icons type="info" size="28"></uni-icons>
					</view>
					<view class="title">{{isStar ? '已评分了':'壁纸评分'}}</view>
					<view class="icon"  @click="starclose()">
						<uni-icons type="closeempty" size="25"  ></uni-icons>
					</view>
				</view>
				<view class="starpf" >
					<uni-rate allowHalf size="33" v-model="starvalue"  :disabled="isStar" disabled-color="rgb(255, 202, 62)"/>
					<text>{{starvalue}}分</text>
				</view>
				<view class="button">
				   <button @click="submitstar" :disabled="!starvalue || isStar" class="mini-btn" type="primary" size="mini">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {getBarHeight} from '@/utils/system.js'
import {onLoad,onUnload} from '@dcloudio/uni-app'
import {RequestImgStar,RequestDetailWall} from '@/apis/apis.js'
import {onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
// mask显示隐藏
let isShow = ref(true)
// 信息
let popup=ref()
// 评分标签
let starRef=ref()
// 评分值 
const starvalue=ref(0)
// 评分按钮
let isDisabled=ref(true)
// 本地存储分类列表
let classifystorlist=ref([])
// 上个页面的传来的图片id
let classIndex=ref([])
// 每张图片索引
let currIndex=ref(0)
// 看过的和加载过的图片
let readIndexImg=ref([])
// 图片信息
let classifyImgInfo=ref(null)

let isStar=ref(false)
function maskCheng(){
	isShow.value=!isShow.value
}	
function navigateBack(){
	uni.navigateBack()
}
function gotoback(){
	uni.switchTab({
		url:'/pages/index/index'
	})	
}
// 打开图片信息弹出
function infoopen(){
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        // this.$refs.popup.open('top')
		    popup.value.open('bottom')
 }
 // 打开评分弹出
function staropen(){
		// 判断有没有评分过
		if(classifyImgInfo.value.userScore){
			isStar.value=true
			// 赋值评论
			starvalue.value=classifyImgInfo.value.userScore
		}
		    starRef.value.open('center')
 }
	
// 关闭信息弹出
function infoclose(){
	   popup.value.close()
	}
// 关闭评论弹出
function starclose(){
	   starRef.value.close()
	   setTimeout(()=>{
		   starvalue.value=0
	       isStar.value=false
	   },200)
	   
	}
	
// 评分按钮
async function submitstar(){
	
	console.log('评分了');
	console.log(classifyImgInfo.value);
    let {classid:classid,_id:wallId} = classifyImgInfo.value
	let res =await RequestImgStar({classid,wallId,userScore:starvalue.value})
	console.log(res);
	if(res.data.errCode===0){
		uni.showToast({
			title:'评分成功',
			icon:'none'
		})
		classifystorlist.value[currIndex.value].userScore=starvalue.value
		uni.setStorageSync("classifyimgstorage",classifystorlist.value)
		// console.log(classifystorlist.value);
		starclose()
	}
}


	try {
	const value = uni.getStorageSync('classifyimgstorage');
	if (value) {
		console.log(value);
	     classifystorlist.value = value.map((item)=>{
		 return {...item,Picurl:item.smallPicurl.replace('_small.webp','.jpg')}
		})
		
	}
} catch (e) {
	// error
}



// 获取上一个页面传递的数据
onLoad(async(e)=>{
	console.log('@@@@@@@@',e);
	classIndex.value=e.id
	if(e.type=='share'){
		let res=await RequestDetailWall({id:classIndex.value})
		classifystorlist.value=res.data.data.map((item)=>{
		 return {...item,Picurl:item.smallPicurl.replace('_small.webp','.jpg')}
		})
	}
	// findIndex 查找classifystorlist里面有没有等于item._id的返回其索引
    currIndex.value = classifystorlist.value.findIndex((item)=>{
	    return  item._id==classIndex.value
	})
	// 第一次点击的图片的信息
	classifyImgInfo.value=classifystorlist.value[currIndex.value]
	IndexImages()
	
	
	
	// console.log(currIndex.value);
})

// 设置图片前后两张预加载
function IndexImages(){
	readIndexImg.value.push(
	currIndex.value<=0 ? classifystorlist.value.length -1: currIndex.value-1,
	currIndex.value,
	currIndex.value>=classifystorlist.value.length -1 ? 0 : currIndex.value+1)
	readIndexImg.value=[...new Set(readIndexImg.value)]
}

// 实现图片全屏左右滑动
function currentChange(e){
	 // console.log(e); 
	 currIndex.value=e.detail.current
	 // 左右滑动改变的currIndex索引的图片信息
	 classifyImgInfo.value=classifystorlist.value[currIndex.value]
	IndexImages()
	// console.log(currIndex.value);
}

// 下载图片
function ImgDown(){
	// 条件编译
	// #ifdef H5
	   uni.showModal({
	   	title:'下载提示',
		content:'长按下载图片',
		showCancel:false
	   })
	// #endif
	// #ifndef H5
	    uni.showLoading({
	    	title:'下载中...',
	    })
		// 这个api是获取图片信息
	    uni.getImageInfo({
	    	src:classifyImgInfo.value.Picurl, //要下载图片地址
			success: (res) => {
				uni.saveImageToPhotosAlbum({
					filePath: res.path, //获取成功之的临时地址
					// 这是下载成功回调
					success: function () {  
						console.log(res);
						uni.showToast({
							title:'下载成功,请到相册查看',
							icon:'none'
						})
					},
					// 下载失败回调
					fail:(err)=>{
						console.log(err);
						// 如果授权成功了,用户中途不下载了 就直接点击下载不用再执行下面的代码授权
						if(err.errMsg=='saveImageToPhotosAlbum:fail cancel'){
							uni.showToast({
								title:'下载失败，请重新下载',
								icon:'none'
							})
							return
						}
						// 下载授权失败提示
						uni.showModal({
							title:'提示授权',
							content:'未授权，无法保存相册',
							success:(res)=> {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.openSetting({
										success: (suc) => {
											console.log(suc);
											if(suc.authSetting['scope.writePhotosAlbum']){
												uni.showToast({
													title:'授权成功',
													icon:'none'
												})
											}else{
												uni.showToast({
													title:'授权失败',
													icon:'none'
												})
											}
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
									uni.showToast({
										title:'授权失败',
										icon:'none'
									})
								}
							}
						})
					}
				})
			},
			complete: () => {
				uni.hideLoading()
			}
	    	
	    })
	// #endif
}
// 分享朋友
onShareAppMessage(()=>{
	return {
	      title: '小冰壁纸库',
	      path: 'pages/ImgView/ImgView?id='+classIndex.value+'&type=share',
		  // imageUrl:'../../static/3.png'
	    }
})
// 分享朋友圈
onShareTimeline(()=>{
	return {
	      title: '小冰壁纸库',
	      query:'id='+classIndex.value+'&type=share'
	    }
})
</script>

<style lang="scss" scoped>
.imgview{
	width: 100%;
	height: 100vh;
	position: relative;
	swiper{
		 width: 100%;
		 height:100%;
		 swiper-item{
			 width: 100%;
			 height:100%;
			 image{
				 width: 100%;
				 height:100%; 
			 }
		 }
	 }
	.mask{
		// .goto{
		// 	position: absolute;
		// 	top:45px;
		// 	left: 10rpx;
		// 	width: 150rpx;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;
		// 	background: rgba(0, 0, 0, 0.5);
		// 	border-radius: 60rpx;
		// 	padding: 8rpx;
		// }
		.backgo{
			position: absolute;
			top:45px;
			left: 10rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 30rpx;
			padding: 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.data_info{
			 position: absolute;
			 left: 50%;
			 top:10%;
			 transform: translate(-50%,-10%);
			 // background-color: brown;
			 padding: 20rpx;
			 display: flex;
			 flex-direction: column;
			 justify-content: center;
			 align-items: center;
			 .text{
				 font-size: 50rpx;
				 color: #fff;
				 padding: 5px;
			 }
			 .date{
				 font-size: 100rpx;
				 color: #fff;
				 padding: 5rpx;
			 }
			 .moth{
				 font-size: 26px;
				 color: #fff;
				 padding: 5rpx;
			 }
		 }
	    }
	    .icons{
			position: absolute;
			left: 50%;
			transform: translate(-50%,10%);
			bottom:10vh;
			background:rgba(0, 0, 0, 0.5);
			width: 65vw;
			height:120rpx ;
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-radius: 120rpx;
			color:#fff;
			.icon_item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		    padding: 5rpx 20rpx;
	 	}
	 			 
	}
	
	.info_title{
			display: flex;
			justify-content: space-between;
            align-items: center;
			padding: 10rpx 20rpx;
    	}
	.info{
		background:rgba(255, 255, 255);
		border-radius: 20rpx 20rpx 0rpx 0rpx;    
		
		.scroll{
			.row{
				padding: 15rpx 20rpx;
				font-size: 30rpx;
				display: flex;
				// line-height: 30rpx;
				.title_item{
					color: rgba(0, 0, 0, 0.5);
					width: 140rpx;
					text-align: center;
				}
				.bz_data{
				    flex: 1;
				// background-color: wheat;
				}
				.tag{
					display: inline-block;
					border: 1px solid $them-color;
					margin-right :20px; 
					text-align: center;
					border-radius: 30rpx;
					// background-color: $them-color;
					color: $them-color;
				}
			}
		}
	}
    .starbg{
		width: 60vw;
		background-color: #fff;
		border-radius:10rpx;
		// padding: 10rpx;
		.starpf{
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 40rpx 0rpx;
			// background-color: wheat;
			
		}
		.button{
			display: flex;
			justify-content: center;
			align-items: center;
		    padding:20rpx;
		   // background-color: lawngreen;
		}
	}
}
</style>
